<template>
	<view class="diy-couponplanb" v-if="itemData.data.length>0" :style="{background:itemData.style.background,padding: itemData.style.paddingTop+'px '+itemData.style.paddingLR+'px '+itemData.style.paddingBom+'px '+itemData.style.paddingLR+'px'}">
		<view class="quan">
			<u-grid :col="3" :border="false">
				<u-grid-item
					v-for="(item, index) in couponList"
					:key="index"
					bg-color="none"
					:custom-style="{
						padding: '0px',
						margin: '9rpx 16rpx',
					}"
					@click="postReceiveList(item,index)"
				>
					<view class="coupon_container">
					  <view class="coupon_money" :style="'background:url('+$setting.imageUrl() +'static/newPeopleCouponBg.png);background-size: 100% 100%;'">
						  <view class="money">{{ dealWithPrice(item.reduce_price) }} 元</view>
						  <view class="coupon-type-text">{{ dealWithText(item.min_price) }}</view>
					  </view>
						<view class="coupon_btm">
							<view
								class="coupon_range"
								v-if="dealWithRange(item).length > 0"
							>
								<view
									v-for="(
										range_items, index
									) in dealWithRange(item)"
									:key="index"
									class="range_item"
								>
									{{ index + 1 + '、' + range_items }}
								</view>
							</view>
							<b-u-button-theme
								width="140rpx"
								height="40rpx"
								size="20rpx"
								style="margin-top: 10rpx"
								class="coupon_btn"
								@click="postReceiveList(item,index)"
							>
								{{
									item.is_receive == true
										? '已领取'
										: item.res_nums&&item.res_nums>1?'立即领取 X '+item.res_nums:'立即领取'
								}}
							</b-u-button-theme>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/*是否显示点*/
				indicatorDots: false,
				/*是否自动*/
				autoplay: true,
				/*切换时间*/
				interval: 5000,
				/*动画过渡时间*/
				duration: 1000,
				cityIsChange: false,
				firstLoading: true,
				couponList:[],
			};
		},
		props: [
			'itemData',
			'userInfo',
			'pageId',
			'pageIndex'
		],
		mounted(){
			console.log('mounted')
		},
		created() {
			// uni.$on('updataCoupon', this.getCoupon)
			console.log(this.pageId,'=========-----------========++++++++')
			console.log(this.pageIndex,'=========-----------========++++++++')
			this.couponList = this.itemData.data;
		},
		methods: {
			scroll(e) {},
			/**
			 * 领取优惠券
			 */
			handleCoupon(item,index) {
				if(!item.is_receive){
					// item.is_receive = true;
					// this.$emit('handleCoupon', index);
					uni.$u.api.postCoupon({
						coupon_id: item.coupon_id
					}).then(res => {
						item.is_receive = true;
						uni.showToast({
							title: "领取成功"
						})
						this.$emit('handleCoupon', index);
					})
				}
			},
			dealWithText(min_price) {
			    if (min_price !== '0.00') {
			        const arr = min_price.split('.');
			        const text = arr[1] === '00' ? arr[0] : min_price;
			        return `满${text}可用`;
			    } else {
			        return '无门槛';
			    }
			},
			dealWithPrice(price) {
			    const arr = price.split('.');
			    const curPriceText = arr[1] === '00' ? arr[0] : price;
			    return curPriceText;
			},
			dealWithRange(item) {
			    const { apply_range_text = '', supplier_range_text = '' } = item;
			    return [supplier_range_text, apply_range_text].filter(
			        (item) => item
			    );
			},
			postReceiveList(item,index) {
				let self = this;
			    if (item['is_receive'] == true) {
			        // let gourl = '/pages/categoty/categoty?topindex=1&smindex=0';
			        // uni.reLaunch({
			        //     url: gourl,
			        // });
			        return;
			    }
			    if (uni.$u.test.isEmpty(this.userInfo.userInfo.mobile)) {
			        this.jump('/pages/login/login');
			        return;
			    }
			    let coupon_ids = [];
				if(self.itemData.params.receive=="all"){
					self.couponList.forEach((citem, key) => {
					    coupon_ids.push(citem.coupon_id);
					});
				}else{
					coupon_ids.push(item.coupon_id);
				}
				uni.$u.api.postReceiveList({
					coupon_ids,
					pageid:self.pageId,
					pageindex:self.pageIndex
				}).then((res) => {
					uni.showToast({
						title: '全部领取成功',
					});
					if(self.itemData.params.receive=="all"){
						self.couponList.forEach((item) => {
							self.$set(item,'is_receive',true);
							// return (item.is_receive = true);
						});
					}else{
						self.$set(self.couponList[index],'is_receive',true);
					}
				});
			},
			
			jump(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			// receiveCoupon: function(index) {
			// 	let self = this;
			// 	let item = self.listData[index];
			// 	if (item.state.value == 0) {
			// 		return false;
			// 	}
			// 	self._post(
			// 		'user.coupon/receive', {
			// 			coupon_id: item.coupon_id
			// 		},
			// 		function(result) {
			// 			uni.showToast({
			// 				title: '领取成功',
			// 				icon: 'success',
			// 				mask: true,
			// 				duration: 2000
			// 			});
			// 			item.state.value = 0;
			// 			item.state.text = '已领取';
			// 		}
			// 	);
			// }
		}
	};
</script>

<style scoped lang="scss">
.diy-couponplanb {
	.quan{
		width: 100%;
		background: #fef2e2;
		padding: 18rpx;
		border-radius: 16rpx;

		.quan_list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 24rpx 12rpx;
			gap: 14rpx;

			.oneOf {
				width: 78px;
				height: 78px;
				border-radius: 4px;
				background: #ffffff;
				padding-top: 10rpx;
				margin-bottom: 17rpx;

				.money {
					font-size: 16px;
					font-weight: normal;
					line-height: 20px;
					text-align: center;
					color: #fe0d1d;
					display: flex;
					justify-content: center;
				}

				.man {
					font-size: 12px;
					font-weight: normal;
					line-height: 22px;
					text-align: center;
					color: #fe0d1d;
					display: flex;
					justify-content: center;
				}

				.nowBe {
					width: 78px;
					height: 32px;
					border-radius: 6px;
					background: #feb403;
					font-size: 14px;
					font-weight: normal;
					line-height: 20px;
					text-align: center;
					letter-spacing: 0px;
					display: flex;
					justify-content: center;
					align-items: center;

					color: #ffffff;
				}
			}
		}
	}
	
	.coupon_container {
	    // margin: 20rpx;
	    width: calc(100% - 18rpx);
	    // min-height: 260rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: space-between;
	    background-color: #fff;
	    padding-bottom: 10rpx;
	}
	.coupon_money {
		width: 100%;
	    height: 130rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
	    color: #fff;
		
	    .money {
	        font-size: 38rpx;
			line-height: 60rpx;
	        // font-family: PingFang SC;
	        font-family: Verdana, Geneva, Tahoma, sans-serif;
	        font-weight: bold;
	    }
	}
	.coupon_top {
	    position: relative;
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	.coupon_btm {
	    flex: 1;
	    min-height: 100rpx;
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    padding-bottom: 10rpx;
	}
	.coupon_img {
	    width: 100%;
	    height: 130rpx;
	}
	.coupon-type-text {
	    // margin-top: 10rpx;
	    font-size: 20rpx;
	    font-family: Verdana, Geneva, Tahoma, sans-serif;
	    font-weight: bold;
	}
	
	.coupon_range {
	    margin-top: 10rpx;
	    padding: 6rpx 10rpx;
	    font-size: 18rpx;
		line-height: 32rpx;
	    color: #999999;
	    background-color: #f6f6f6;
	    border-radius: 6rpx;
	    width: calc(100% - 22rpx);
	}
}
</style>